<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <title>加入會員</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="../scripts/jquery-1.11.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            var zipcode;
            $(document).ready(function(){
                $(".client").text("親愛的朋友您好~");
        
                //ajax讀取地址
                $.get("../tools/Address.xml",null,LoadCounty,"xml");                
                $("#county").change(LoadRegion);
                $("#region").change(function(){
                    $("#address").focus();
                });
                
                //更換驗證圖
                $("#changeVaildImgBtn").click(function(){                    
                    $("#vaildImg").attr("src","../tool/GetVaildNumPic?tt="+new Date().getTime());
                });
                
                //帳號是否重覆
                $("#accountName").blur(function(){
                    if($("#accountName").val()=="")
                    {
                        $("#CheckAccountSpan").text("");
                        return;
                    }
                        
                    var vv=$("#accountName").val();                    
                    $.get("../tool/CheckAccount?nn="+vv,null,function(xx){
                        if(xx.trim()=="t")                        
                            $("#CheckAccountSpan").text("帳號已被使用").css({"color":"red","font-weight":"bold"});                        
                        else if(xx.trim()=="f")                        
                            $("#CheckAccountSpan").text("帳號可以使用").css({"color":"blue","font-weight":"bold"});                        
                    },"text");
                });
                
                $("#OKBtn").click(function(){                    
                    return CheckForm();                    
                });
            });
            
            //載入縣市
            function LoadCounty(xx)
            {
                zipcode=xx;
                $(zipcode).find("County").each(function(){
                    var vv=$(this).attr("Name");
                    var s="<option value=\""+vv+"\">"+vv+"</option>";
                    $(s).appendTo("#county");
                });
            }
            
            //載入鄉鎮
            function LoadRegion()
            {   
                $("#region").empty();
                $("<option>--請選擇--</option>").appendTo("#region");
                
                var cc=$("#county").val();
                if(cc=="--請選擇--") return;
                
                $(zipcode).find("County[Name=\""+cc+"\"]").children().each(function(){
                    var vv=$(this).attr("Name");
                    var s="<option value=\""+vv+"\">"+vv+"</option>";
                    $(s).appendTo("#region");
                });
            }
            
            //檢驗表單填寫
            function CheckForm(){
                var msg="";
                var reg;
        
                if($("#accountName").val()=="")
                    msg+="* 必須填寫欲申請的帳號！\n";
                if($("#accountPassword").val()=="")
                    msg+="* 必須填寫欲使用的密碼！\n";
                
                if($("#confirmAccountPassword").val()=="")
                    msg+="* 必須再次輸入認欲使用的密碼！\n";
                else
                {
                    if($("#accountPassword").val()!=$("#confirmAccountPassword").val())
                        msg+="* 您輸入兩次的密碼不相符！\n";
                }
                
                if($("#accountRealName").val()=="")
                    msg+="* 必須填寫您的姓名！\n";
                if($('input:radio:checked[name="sex"]').val()==null)
                    msg+="* 必須選擇性別！\n";            
                if($("#county").val()=="--請選擇--" || $("#region").val()=="--請選擇--" || $("#address").val()=="")
                    msg+="* 必須選擇及填寫正確的地址！\n";
                
                if($("#email").val()=="")
                    msg+="* 必須填寫電子郵件！\n";
                else
                {
                    reg=/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                    if(!reg.test($("#email").val()))
                        msg+="* 請填寫正確的電子郵件！\n";
                }
        
                if(msg=="")
                    return true;
                else
                {
                    alert(msg);
                    return false;
                }
            }
        </script>
    </head>
    <body>
        <jsp:include page="../tools/TopBanner.jsp"></jsp:include>
        <h3 class="widget-title">加入會員</h3>
        <div id="ContentDiv">
            <form id="form1" action="AddMember" method="post">
            <table width="950" cellpadding="15" >
                <tr>
                    <td align="right" width="100"><b>帳號：</b></td>
                    <td width="300">
                        <input id="accountName" name="accountName" type="text" value="" />
                        <span id="CheckAccountSpan"></span>
                    </td>
                    <td align="right" width="100"><b>聯絡電話：</b></td>
                    <td width="400"><input id="tel" name="tel" type="text" value="" /></td>
                </tr>
                <tr>
                    <td align="right"><b>密碼：</b></td>
                    <td><input id="accountPassword" name="accountPassword" type="password" value="" /></td>
                    <td align="right"><b>電子郵件：</b></td>
                    <td><input id="email" name="email" type="text" value="" />
                    </td>
                </tr>
                <tr>
                    <td align="right"><b>確認密碼：</b></td>
                    <td><input id="confirmAccountPassword" type="password" value="" /></td>
                    <td align="right" valign="middle"><b>聯絡地址：</b></td>
                    <td rowspan="2">
                        <p><b>縣市：</b><select id="county" name="county"><option>--請選擇--</option></select>&nbsp;&nbsp;
                            <b>鄉鎮市：</b><select id="region" name="region"><option>--請選擇--</option></select></p>
                        <br><p><b>地址：</b><input id="address" name="address" type="text" value="" /></p></td>
                </tr>
                <tr>
                    <td align="right"><b>姓名：</b></td>
                    <td><input id="accountRealName" name="accountRealName" type="text" value="" /></td>
                    <td align="right"><b></b></td>
                </tr>
                <tr>
                    <td align="right"><b>性別：</b></td>
                    <td><input id="maleSex" name="sex" type="radio" value="男生" />男生 <input id="femaleSex" name="sex" type="radio" value="女生" />女生<br><br></td>
                    <td align="right" valign="middle"><!--<b>驗證碼：</b>--></td>
                    <td rowspan="2">
                        <!--<img id="vaildImg" src="/MyStruts2Web/tool/GetVaildNumPic" /><br />
                        <input id="vaildNumText" name="vaildNumText" type="text" value="" />&nbsp;
                        <input id="changeVaildImgBtn" type="button" value="更換圖片">
                        <input id="vaildAnsHidden" type="hidden" value="" />-->
                    </td>
                </tr>
                <tr>
                    <td align="right"></td>
                    <td colspan="2"></td>
                    <td align="right">&nbsp;</td>
                </tr>
                <tr>
                    <td align="right">&nbsp;</td>
                    <td>
                        <input id="OKBtn" type="submit" value="加入會員" />
                        <input id="Reset1" type="reset" value="重新填寫" /></td>
                    <td align="right">&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            </table>
        </form>
        </div>
        <%@include file="../tools/PageFooter.jsp"  %>
    </body>
</html>
